<template>
  <el-card shadow="never" class="rd-8 mb-8">
    <el-button-group class="mb-10">
      <el-button type="primary" :plain="!showItems[0]" @click="handleShow(0)">
        景点数据
      </el-button>
      <el-button type="primary" :plain="!showItems[1]" @click="handleShow(1)">
        美食数据
      </el-button>
      <el-button type="primary" :plain="!showItems[2]" @click="handleShow(2)">
        酒店数据
      </el-button>
    </el-button-group>
    <div v-if="showItems[0]">
      <ScenicSpotsCharts />
    </div>
    <div v-if="showItems[1]">
      <FoodCharts />
    </div>
    <div v-if="showItems[2]">
      <HotelCharts />
    </div>
  </el-card>
</template>

<script setup>
import FoodCharts from './items/food.vue'
import HotelCharts from './items/hotel.vue'
import ScenicSpotsCharts from './items/scenicSpots.vue'
import { ref } from 'vue'

let showItems = ref([true, false, false])

const handleShow = (index) => {
  showItems.value = [false, false, false]
  showItems.value[index] = true
}
</script>

<style lang="scss" scoped></style>
